import React from "react";
import {Form, Input, Button, Select, InputNumber, Col, Checkbox, Row} from 'antd';
import API from '../../api/api';
const { Option } = Select;

const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 19,
    },
};

export default class UserForm extends React.Component {

    constructor(props) {
        super(props);
        this.state={
            bindObj:this.props.bindObj,
        }
    }

    permissions = [];
    formRef = React.createRef();
    onGenderChange = (value) => {
        this.formRef.current.setFieldsValue({
            note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
    };

    getRoles = () => {
        let items = []
        items = JSON.parse(sessionStorage.getItem("roles"))
        let checkBoxItems = [];
        items.map(item => {
            checkBoxItems.push(<Col span={6}>
                <Checkbox
                    value={item.key}
                    style={{
                        lineHeight: '32px',
                    }}
                    // onClick={item=>{this.props.onChange(item)}}
                >
                    {item.name}
                </Checkbox>
            </Col>)
        })
        return checkBoxItems;
    }

    onFinish = (values) => {
        let result;
        if(this.state.bindObj=="user"){
            result = API.insertUserBind(values)
        }else result = API.insertDeptBind(values)
        if(result=="ok"){
            this.props.result("ok");
            console.log("ok")
        }else{
            alert(result)
            this.props.result("error");
        }
    };
    onReset = () => {
        this.formRef.current.resetFields();
    };

    onChanged=(item)=>{
        this.setState({
            bindObj : item
        })
    }

    render() {
        return (
            <Form
                {...layout}
                ref={this.formRef}
                name="control-ref"
                onFinish={this.onFinish}
                onReset={this.onReset}
            >
                <Form.Item
                    name="bindObj"
                    label="赋权对象"
                >
                    <Select
                        // placeholder="Select a option and change input text above"
                        onChange={this.onChanged}
                        allowClear
                        style={{width:'6rem'}}
                        defaultValue={this.state.bindObj}
                    >
                        <Option value="user">用户</Option>
                        <Option value="dept">部门</Option>
                    </Select>
                </Form.Item>
                {
                    this.state.bindObj=="user" ?
                    <Form.Item
                        name="userWorkNum"
                        label="用戶工號"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input style={{ width: '20%' }}/>
                    </Form.Item>
                    :
                    <Form.Item
                        name="deptNo"
                        label="部门编号"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input style={{ width: '20%' }}/>
                    </Form.Item>
                }
                <Form.Item
                    ellipsis={true}
                    name={"bindRoleIdList"}
                    label={"角色綁定"}
                    rules={[
                        {
                            required: true,
                            // type: 'Tree'
                        }
                    ]}
                >
                    <Checkbox.Group >
                        <Row ellipsis={true}>
                            {this.getRoles()}
                        </Row>
                    </Checkbox.Group>
                </Form.Item>

                <Form.Item
                    label="提交"
                    name="commit"
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}













// import {Input, InputNumber, Modal} from "antd";
// import SelectRole from "./SelectRole";
// import React from "react";
//
// <span>用户工号</span>
// <Input placeholder="Basic usage" />
//     <span>用户备注</span>
// <InputNumber placeholder="Basic usage" />
// <span style={{display:"block"}}>用户角色</span>
// <SelectRole />

